<template>
  <l-data-panel v-if="data._isInit" :label="config.title">
    <div class="l-module-wraper">
      <div
        v-for="item in showMdules"
        :key="item.id"
        @click="handleClick(item.moduleId)"
        class="l-data-board l-data-board-module"
      >
        <div class="l-data-board__icon">
          <div
            class="l-data-board-module-inner"
            :style="{ 'background-color': item.color }"
          ></div>
          <i :class="getIcon(item.moduleId)" :style="{ color: item.color }"></i>
        </div>
        <div class="l-data-board__text">
          <div class="l-data-board__title">
            {{ $t(getName(item.moduleId)) }}
          </div>
        </div>
      </div>
    </div>
  </l-data-panel>
</template>
<script>
import { mapGetters } from "vuex";
import viewMixins from "../mixins/view";
export default {
  props: ["data", "isPreview"],
  mixins: [viewMixins()],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["modules"]),
    myModules() {
      if (this.loginInfo.f_SecurityLevel == 1 || this.isPreview) {
        return this.modules.filter((t) => t.f_EnabledMark == 1);
      }
      return this.modules.filter((item) => {
        if (item.f_EnabledMark == 1) {
          const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
          if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
    },
    showMdules() {
      return this.config.list.filter(
        (t) => this.myModules.findIndex((t2) => t2.f_EnCode == t.moduleId) != -1
      );
    },
  },
  methods: {
    getName(id) {
      return this.myModules.find((t2) => t2.f_EnCode == id).f_FullName;
    },
    getIcon(id) {
      return this.myModules.find((t2) => t2.f_EnCode == id).f_Icon;
    },
    handleClick(id) {
      if (!this.isPreview) {
        const module = this.myModules.find((t2) => t2.f_EnCode == id);
        if (module) {
          this.$router.$lrRouter.goto(module);
        }
      }
    },
  },
};
</script>

<style lang="scss">
.l-data-board-module {
  width: 120px;
  position: relative;
  box-shadow: none;
  padding-left: 0;
  flex-direction: column;
  .l-data-board-module-inner {
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }

  .l-data-board__icon {
    position: relative;
    margin-top: 0;
    top: 0;
    left: 0;
    margin: auto;
  }
  .l-data-board__text {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 8px;
    text-align: center;
    width: 100%;
  }
}
.l-module-wraper {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  align-items: center;
  overflow: auto;
}
</style>